showdownでMarkdownテンプレートをHTML文章に手元でお手軽コンバート

showdownでMarkdownテンプレートをHTML文章に手元でお手軽コンバート

MarkdownをHTMLに変換できる、CLIとしても使えるshowdownの紹介です。現在私がDevIOに投稿する記事はこのCLIにてMarkdownからHTMLにコンバートして書いていたりします。
Clock Icon2020.09.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

日頃使っていたWordPress投稿用VimプラグインがDevIO側の更新によってブログ投稿に利用できなくなり、他の投稿方法について模索していました。投稿フォーム上でMarkdownを使う方法もありますが、利用できるMarkdownの種類や入れ子等には制限が掛かります。

色々なライブラリを試していたところ、

  • Terminal上でMarkdownからHTMLに変換しつつ
  • 実ファイル生成を経由せず
  • クリップボード経由でペースト対応が可能になる

という願望を満たせるCLIshowdownを見つけました。使い勝手について書いてみました。

必要としたもの

今回必須とした条件は以下の通り。

  • Terminal上で完了出来ること
  • 記述した内容以外が自動補完されないこと(Header等)
  • HTMLのみの出力

GUIのアプリケーションとなると自動化が難しくなることと、記事文面だけでよいのでMeta要素やCSSは要りません。

ライブラリの検討

幾つものライブラリから、都合よく条件をすべて満たすものがありました。それがshowdown

Pandocも使ってみましたが、単独で完結したページを作る場合には適していると感じました。

使い方

今回求めていた使い方は、wikiの1ページにまとめられています。JavaScriptによる文章の加工編集に重きがあるライブラリで、MarkdownをHTMLにコンバートするのはそのうちの一機能のようです。

尚、cliとしてのコマンドはshowdown makehtmlのみです。makehtmlコマンドのみでも良さそうに思えましたが、yargs/yargsにてshowdownファイルにmakehtmlというコマンドを追加しているという扱いになっています。

変換してクリップボードに追加

% echo '#test' > test.md
% showdown makehtml -i test.md | pbcopy
Enabling option ghCodeBlocks
Enabling option encodeEmails
…
Reading data from file…
Parsing markdown…
Writing data to stdout…


DONE!

htmlに変換してtest.htmlとして保存

% echo '#test' > test.md
% showdown makehtml -i test.md -o test.html
Enabling option ghCodeBlocks
Enabling option encodeEmails
...
Reading data from file...
Parsing markdown...
Writing data to file...


DONE!
% cat test.html
<h1 id="test">test</h1>

html変換して標準出力

% echo '#test' > test.md
% showdown makehtml -i test.md
Enabling option ghCodeBlocks
Enabling option encodeEmails
...
Reading data from file...
Parsing markdown...
Writing data to stdout...
<h1 id="test">test</h1>

DONE!

既存のbug

標準入力の読み込みに失敗します。

% echo "# test" | showdown makehtml
Enabling option ghCodeBlocks
Enabling option encodeEmails
…
Reading data from stdin…
ERROR: Could not read from stdin, reason: The "buffer" argument must be one of type Buffer, TypedArray, or DataView. Received type number

CLIの紹介では可能とありますが、現在は正常に動作していないようです。

Input source. Usually a md file. If omitted or empty, reads from stdin

あとがき

DevIO執筆のために探して見つけたライブラリでした。使い方次第ですが、テンプレートとして利用しているHTMLタグが入れ子等のないシンプルなものであれば、テンプレートをmarkdownで作って変換するとHTMLタグ整形の手間が省けそうです。

参考リンク

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.